import uCharts from '@/components/u-chart/index';
let _self;
let canvaRadar = null;
export default {
  name: 'Analysis',

  data() {
    return {
      productList: [],
      cWidth: '',
      cHeight: '',
      pixelRatio: 1,
      display: this.$route.query.display
    };
  },
  onLoad(options) {
    const canvasSize = this.display === 'pc' ? '1400' : '700'
    uni.sessionStorage.get('PRODUCTG_LIST').then(res => {
      this.productList = res.data
      _self = this;
      this.cWidth = uni.upx2px(canvasSize);
      this.cHeight = uni.upx2px(canvasSize);
      this.getServerData();
    })
  },
  methods: {
    showName(index) {
      if(this.display === 'pc' && index >= 1) {
        return false
      }
      return true
    },
    getServerData() {
      const categories = this.productList[0].statistic.map(item => {
        return item.desc
      })
      const series = this.productList.map(product => {
        return {
          name: product.productName,
          data: product.statistic.map(i => {
            return i.value
          })
        }
      })
      const Radar = {
        categories,
        series
      }
      console.log(Radar)
      _self.showRadar("canvasRadar", Radar);
    },
    showRadar(canvasId, chartData) {
      canvaRadar = new uCharts({
        context: uni.createCanvasContext(canvasId, _self),
        type: 'radar',
        background: '#FFFFFF',
        pixelRatio: _self.pixelRatio,
        animation: true,
        dataLabel: false,
        categories: chartData.categories,
        series: chartData.series,
        width: _self.cWidth,
        height: _self.cHeight,
        extra: {
          radar: {
            max: 10//雷达数值的最大值
          }
        }
      });

    },
    touchRadar(e) {
      canvaRadar.touchLegend(e, {
        animation: true
      })
    }
  }
}